<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>批量导入(商品，每日库存，销售价格)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <el-form :inline="true">
            <el-form-item>
                <el-button :disabled="loading" style="margin-left: 10px;" size="small" type="danger"
                    @click="window.history.back()">返回</el-button>
            </el-form-item>
            <el-form-item>
                <el-upload class="upload-demo" accept=".xlsx" ref="upload" action="" :show-file-list="false"
                    :on-change="handleChange" :auto-upload="false">
                    <el-button :disabled="loading" slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button :loading="loading" style="margin-left: 10px;" size="small" type="success"
                        @click="submitUpload(0)">上传文件</el-button>
                    <el-button :disabled="loading" style="margin-left: 10px;" size="small" type="danger"
                        @click="handleClean">清空数据</el-button>
                    <el-badge :value="success" style="margin-left: 10px;" class="item" type="success">
                        <el-button :type="filter=='1'?'success':''" size="small" @click="handleTab('1')">成功</el-button>
                    </el-badge>
                    <el-badge style="margin-left: 10px;" :value="error" class="item">
                        <el-button :type="filter=='2'?'danger':''" size="small" @click="handleTab('2')">失败</el-button>
                    </el-badge>
                </el-upload>
            </el-form-item>
        </el-form>
        <el-table ref="multipleTable" v-if="isTable"
            :data="Data.slice((form.page-1)*form.limit,form.page*form.limit)" stripe border style="width: 100%"
            height="calc(100vh - 180px)">
            <!-- <el-table-column type="selection" align="center" :selectable="selectable" reserve-selection width="40"></el-table-column> -->
            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template v-slot="{row,$index}">
                    <el-button v-if="row.isStatus!='3'" size="small" :disabled="loading"
                        :type="row.isEdit?'success':'primary'" @click="handleEdit(row)">
                        {{row.isEdit?'保存':'修改'}}
                    </el-button>
                    <el-tooltip v-else class="item" effect="dark" content="当前数据正在确认中，暂时无法修改" placement="top-start">
                        <el-button size="small" style="cursor: not-allowed" type="info">修改</el-button>
                    </el-tooltip>
                    <el-button size="small" :disabled="loading" type="danger"
                        @click="handleRemove($index,'form')">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="100">
                <template v-slot="{row}">
                    <el-tag
                        :type="row.isStatus=='1'?'success':row.isStatus=='2'?'danger':row.isStatus=='3'?'warning':''"
                        :style="{cursor: row.isStatus=='3'?'pointer':'default'}" @click="handleSubmit(row)">
                        {{row.isStatus=='1'?'成功':row.isStatus=='2'?'失败':row.isStatus=='3'?'点击确认':'待导入'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="原因说明" show-overflow-tooltip align="center" width="150">
                <template v-slot="{row}">
                    {{row.Cause}}
                </template>
            </el-table-column>
            <el-table-column v-if="headeData.length == 0" label="暂无导入数据" align="center"></el-table-column>
            <el-table-column min-width="160" show-overflow-tooltip v-for="item in headeData" :key="item" :label="item"
                align="center" :prop="item">
                <template v-slot="{row}">
                    <el-input v-if="row.isEdit&&row.isStatus!='3'" v-model="row[item]" clearable></el-input>
                    <span v-else>{{row[item]}}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange($event,'form')"
            @current-change="handleCurrentChange($event,'form')" :current-page="form.page"
            :page-sizes="[15, 30 , 60 ,100, 250, 500]" :page-size="form.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="Data.length">
        </el-pagination>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.min.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/import_edit.js"></script>
</body>

</html>